<template>
  <div>
    <div class="padding-lr30">
      <div class="rem-30px flex align-center padding-tb30 border-bottom">
        <div class="c-99 w-90 text-justify word-all">手机号</div>
        <div class="flex-grow padding-l60">
          <input type="text" name="phone" v-model="phone" placeholder="请输入手机号" />
        </div>
      </div>
      <div class="rem-30px flex align-center padding-tb30 border-bottom">
        <div class="c-99 w-90 text-justify word-all">验证码</div>
        <div class="flex-grow padding-l60">
          <input type="number" name="code" v-model="code" placeholder="请输入验证码" />
        </div>
        <div
          :class="[timeType?'bg-f5':'bg-ff0',timeType?'c-99':'text-ff','rem-24px','radius-10']"
          style="padding: 0.18rem 0.1rem;word-break: keep-all;margin-left: -0.4rem"
          @click="getCode"
        >获取验证码{{timeType?time:''}}</div>
      </div>
      <!--  -->
      <div class="padding-lr28 margin-t40">
        <div class="sure text-center bg-ff0 text-ff letter-10" @click="sure">保存</div>
      </div>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      phone: "",
      code: "",
      time: 60,
      timeType: false,

      type: false
    };
  },
  mounted() {
    document.querySelector("html").style.backgroundColor = "#ffffff";
    this.type = this.$route.query.type;
  },
  methods: {
    sure() {
      if (!this.phone || !this.code) {
        this.$toast("信息不能为空");
      }
      this.$axios
        .post("/common/send/verifyCode", {
          phone: this.phone,
          code: this.code
        })
        .then(res => {
          if (res.data.code == 0) {
            let url = this.type
              ? "/home/changePhone"
              : "/common/send/verifyCode";
            this.$axios
              .post(url, {
                token: this.type
                  ? localStorage.getItem("qx_token")
                  : localStorage.getItem("token"),
                phone: this.phone,
                code: this.code
              })
              .then(res => {
                if (res.data.code == 0) {
                  this.$router.push({
                    path: this.type ? "/mine" : "/recruit/mine"
                  });
                }
              });
          }
        });
    },
    // 手机发送验证码
    getCode() {
      if (!this.phone || !/^1[3456789]\d{9}$/.test(this.phone)) {
        this.$toast("手机号码格式有误");
        return false;
      }
      if (this.timeType) {
        return false;
      } else {
        this.timeType = true;
        this.$axios
          .post("/common/send/smsCode", {
            phone: this.phone
          })
          .then(res => {
            this.$toast(res.data.msg);
          });
        var getTime = setInterval(() => {
          this.time--;
          if (this.time < 0) {
            clearInterval(getTime);
            this.timeType = false;
            this.time = 60;
          }
        }, 1000);
      }
    }
  }
};
</script>

<style>
html {
  background: white;
}
</style>

<style scoped>
.popup input {
  height: 1rem;
  line-height: 1rem;
}
</style>